<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 <div id="app">
    <cpn :moves="moves"  :cmessage="message"></cpn>
  </div>


 <template id="cpn">
  <div>
    <ul>
      <li v-for="item in moves">{{item}}</li>
    </ul>
    <h2>{{cmessage}}</h2>
  </div>
 </template>

     <script src="../js/vue.js"></script>
     <script>
       /**
        * vue实例 就可以看成父组件  cpn看成子组件
        * 父组件向子组件传递数据 通过 props
        */
       const cpn={
         template: '#cpn',
         //props: ['moves']
         //1.类型限制
         props:{
           moves: {
             type: Array,
             default(){
               return []
             },
           },
           //2. 提供一些默认值
           cmessage:{
             type: String,
             default: 'aaaaa',
             required: true, //必须要传的，否则报错
           },

         }

       }
       const app=new Vue({
         el: '#app',
         data: {
           message:'你好vue',
           moves:['海王','忍者神龟','海贼王','海尔兄弟']
         },
         //属性增强
         components:{
           cpn
         }
       })
     </script>
</body>
</html>